<template>
	<view class="food-nearby m-foot-item" @click="goUrl">
		<view class="go-btn"></view>
		<view class="food-img-container">
			<image class="food-img" :src="food.image" mode="scaleToFill"></image>
			<view class="m-sore-count">
				<!-- 评分 -->
				<text class="m-foot-sore mr10">{{food.star}}分</text>
				<!-- 月销 -->
				<text v-if="food.seckill_discount == '10'">月销{{food.sell_count}}</text>				
			</view>
		</view>
		
		<view class="m-foot-desc-wrap">
			<view class="m-foot-name">{{food.name}}</view>
			<!-- 价格 -->
			<view class="m-foot-price">
				<text class="m-foot-price-symbol">￥</text>
				<text class="price-small">{{food.price}}</text>
				<text>/{{food.unit}}</text>
			</view>
			<!-- 起送/配送 -->
			<!-- <view class="m-foot-delivery">
				<text class="mr10">起送￥{{food.delivery_price}} </text>
				<text>配送￥{{food.delivery_money}}</text>
			</view>	 -->
		</view>
		
	<!-- 	<view class="food-price text-padding">
			<view>
				<text class="price">￥{{food.price}}</text>
				<text class="old-price" v-if="food.price != food.o_price">￥{{food.o_price}}</text>
				<text class="discount" v-if="food.seckill_discount != '10'" >{{food.seckill_discount}}折</text>
			</view>
			<view>
				<text  class="food-desc" v-if="food.seckill_discount == '10'" style="padding-right: 10px;">月销{{food.sell_count}}</text>
			</view>
		</view>
		<view class="food-desc text-padding">
			<text>起送￥{{food.delivery_price}} </text>
			<text>配送￥{{food.delivery_money}}</text>
		</view>
		<view class="store-info-container text-padding">
			<view class="store-img-container">
				<image class="store-img" :src="food.store_image" mode="scaleToFill"></image>
			</view>
			<view class="store-info">
				<view class="store-name">{{food.store_name}}</view>
				<view class="store-name store-desc">
						<text>{{food.star}}分</text>
						<view>
							<text>{{food.delivery_time}}{{food.delivery_time_type}}</text>
							<text v-if="food.range" style="margin:0 5rpx;">|</text>
							<text v-if="food.range">{{food.range}}</text> 
						</view>
				</view>
			</view>
		</view>
	 -->
	</view>
</template>

<script>
export default {
	name:'food-nearby',
	props:{
		food: {
			type: Object,
			default:function(){
				return {}
			}
		}
	},
	methods:{
		goUrl(){
			// console.log(this.food)
			// return
			const data = {
				goods_id:this.food.goods_id,
				store_id:this.food.store_id
			}
			this.$emit('handleCardClick',data)
		}
	}
}
</script>

<style scoped>
.food-img-container {
	position: relative;
}
	
.m-sore-count {
	position: absolute;
	left:0;
	right:0;
	bottom:0;
	line-height: 32upx;
	background-color: #d1d1d1;
	font-size:8px;
	text-align: center;
}	
	
.m-foot-item{
	position: relative;
	background-color: #ffd5ba !important;
	padding-bottom: 0 !important;
}	
	
.go-btn {
	position: absolute;
	bottom:26upx;
	right:20upx;
	width:28upx;
	height:28upx;
	background: url(gourl-icon.png) no-repeat center;
	background-size: 100%;
}	
	
.m-foot-desc-wrap {
	padding: 0 4upx;
} 

.m-foot-sore-count,
.m-foot-delivery{
	font-size:22upx;
	color:#747474;
}

.m-foot-sore-count {
	display: flex;
}

.m-foot-sore {
	padding-left: 24upx;
	background: url(./m-food-sore-icon-red.png) no-repeat left center;
	background-size: 20upx;
}

.mr10 {
		margin-right:8upx;
	}

.m-foot-price-symbol{
	font-size:20upx;
}


.m-foot-name {
	padding-top:18upx;
	font-size:12px;
}
	
.m-foot-price{
	color:#ff0000;
	font-size:14px;
	padding:10upx 0 20upx;
}	
	
.m-foot-item {
	padding:15upx;
	background-color: #fff;
	border-radius: 12px;
	box-sizing: border-box;
}	
	
.food-nearby {
	width: 100%;
	/* height: 200px; */
	border: 1upx solid #F7F7F7;
	border-radius: 20upx;
}

.food-img-container {
	position: relative;
	width: 100%;
	/* 设置图片为正方形 */
	height:0;
    padding-top: 100%;
}

.food-img {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border-top-left-radius: 10upx;
	border-top-right-radius: 10upx;
}

.text-padding {
	padding-left: 10upx;
	height: 24px;
	line-height: 24px;
	vertical-align: middle;
}

.food-name {
	max-width: 90%;
	font-weight: 600;
}

.text-ellipis {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
}
.food-desc {
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
	font-size: 10px;
	color: #999999;
}

.food-desc text{
	margin-right: 10upx;
}

.price {
	font-size: 18px;
	color: #FB5035;
	margin-right: 10upx;
}

.price-small {
	font-size:12px;
}

.old-price {
	text-decoration: line-through;
	font-size: 10px;
	color: #999999;
	margin-right: 20upx;
}

.discount {
	display: inline-block;
	font-size: 10px;
	color: #FB5035;
	border: 1upx solid #F4F4F4;
	background-color: #F4F4F4;
	border-radius: 8upx;
	height: 18px;
	line-height: 18px;
	vertical-align: middle;
	padding: 2upx 10upx;
}

.store-info-container {
	height: 50px;
	margin-top: 15upx;
	line-height: 50px;
	vertical-align: middle;
	/* border: 1upx solid #F7F7F7; */
	display: flex;
}

.store-img-container {
	width: 35px;
	height: 35px;
	background-color: #f4f4f4;
	margin-top: 5px;
}

.store-img {
	width: 100%;
	height: 100%;
	border-radius: 10upx;
}

.store-info {
	flex: 1;
	/* background-color: #f4f4f4; */
	margin: 5px;
}

.store-name {
	font-size: 12px;
	color: #666666;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
	/* white-space: nowrap; */
	overflow: hidden;
	text-overflow:ellipsis;
}

.store-desc {
	/* margin-top:5upx; */
	font-size: 10px;
	color: #999999;
	display: flex;
	justify-content: space-between;
}

.food-price {
	display: flex;
	justify-content: space-between;
}
</style>
